<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_class与style绑定</title>
    <style type="text/css">
        .myClass {
            color: red;
        }

        .myClass2 {
            color: blue;
            font-size: 18px;
        }

        .classA {
            background: blue;
        }

        .classB {
            font-size: 30px;
        }
    </style>

</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
    <h2 :class="myClass">1. class绑定: :class='xxx'</h2>
    <p :class='{classA: hasClassA, classB:hasClassB}'>class 对象</p>

    <h2 :style="{fontSize,color}">2. style绑定</h2>
    <button @click="update">更新</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      // 指定class样式
      myClass: 'myClass',
      //动态替换class样式
      hasClassA: true,
      hasClassB: false,
      fontSize: '10px',
      color: 'red'
    },

    methods: {
      update() {
        this.myClass = 'myClass2'
        this.hasClassA = !this.hasClassA
        this.hasClassB = !this.hasClassB
        this.fontSize = '40px';
        this.color = 'blue'
      }
    }
  })
</script>
</body>
</html>
